import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'



Vue.use(VueRouter)


//导入页面文件夹
//原本写法 （不会懒加载）import 组件名 from '路径'
//路由懒加载：你没访问这个路由不加载，访问了才加载： const 组件名 =  () => import('路径')
const login = () => import('@/views/login')
const layout = () => import('@/views/layout')
const home = () => import('@/views/home')
const ask = () => import('@/views/ask')
const video = () => import('@/views/video')
const mine = () => import('@/views/mine')
const edit = () => import('@/views/mine/edit')
const article = () => import('@/views/article')
const search = () => import('@/views/search')
const result = () => import('@/views/search/result')
const chat = () => import('@/views/mine/chat')


const routes = [
  { name: 'chat', path: '/mine/chat', component: chat },
  { name: 'search', path: '/search', component: search },
  { name: 'article', path: '/article', component: article },
  { name: 'result', path: '/search/result', component: result, },
  //搜索结果页面这个 needKeep: true 不要乱加，可能搜索结果页面会重复出现第一次搜索的记录页面
  // { name: 'result', path: '/search/result', component: result, meta: { needKeep: true } },
  {
    path: '/', redirect: '/layout/home'
  },
  {
    name: 'login', path: '/login', component: login
  },
  {
    name: 'edit', path: '/mine/edit', component: edit, meta: {  //用户编辑页面记得设为需要登录的路由
      // 标记这个路由为需要登录的路由
      needLogin: true
    }
  },//不用作为mine的子路由
  {
    name: 'layout', path: '/layout', component: layout,
    children: [
      { name: 'home', path: 'home', component: home, meta: { needKeep: true } },
      { name: 'ask', path: 'ask', component: ask },
      { name: 'video', path: 'video', component: video },
      {
        name: 'mine',
        path: 'mine',
        component: mine,
        meta: {
          // 标记这个路由为需要登录的路由
          needLogin: true
        }
      }
    ]
  }
]


const router = new VueRouter({
  routes
})

//前置导航守卫
// 前置钩子
// to：去哪的路由信息
// from：从哪来
// next：放行，调用就代表放行
router.beforeEach((to, from, next) => {

  // 先判断你去的地方是不是一个需要登录的页面，如果是，才判断有没有登录
  // 如果不是需要登录的页面,就直接放行
  if (to.meta.needLogin) {

    // 有token代表登录了，没token代表没登录
    if (store.state.tokenObj.token) {
      // console.log(store.state.tokenObj.token);
      next()
    } else {

      // 弹出消息：请先登录
      Vue.prototype.$toast.fail('请先登录')
      // 没登录打回登录页，并且记录登录成功后该回的页面
      next({
        name: 'login',
        query: {
          // to.path就是我本来想去的页面，但是没去成，打回登录页了
          back: to.path
        }
      })
    }

  } else {
    // 不需要登录的页面直接放行
    next()
  }
})

export default router
